<template>
  <div class="emloyee-container">
    <div class="app-container">
      <el-card>
        <PageTools>
          <template #left>
            <!-- 左侧 -->
            <div class="tips">
              <i class="el-icon-info" />
              <span>总记录数：{{ params.total }}</span>
            </div>
          </template>
          <template #right>
            <!-- 右侧 -->
            <el-button type="warning" size="small" @click="$router.push('/uploadExcel')">excel导入</el-button>
            <el-button type="danger" size="small" @click="exportExcel">excel导出</el-button>
            <el-button type="primary" size="small" @click="addEmployee">新增员工</el-button>
          </template>
        </PageTools>
        <!-- 详情内容 -->
        <el-card style="margin-top: 10px;">
          <!-- order: ascending:升序, descending:降序  -->
          <el-table v-loading="loading" border :data="list" :default-sort="{prop: 'timeOfEntry', order: 'ascending'}">
            <el-table-column label="序号" type="index" :index="indexMethod" width="80" />
            <el-table-column label="姓名" prop="username" />
            <el-table-column label="头像">
              <template #default="{row}">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="row.staffPhoto"
                />
              </template>
            </el-table-column>
            <el-table-column label="工号" prop="workNumber" />
            <el-table-column label="聘用形式" prop="formOfEmployment">
              <template #default="{row}">
                {{ formatEmployment(row.formOfEmployment) }}
              </template>
            </el-table-column>
            <el-table-column label="部门" prop="departmentName" />
            <el-table-column label="入职时间" sortable prop="timeOfEntry">
              <template #default="{ row }">
                {{ formatDate(row.timeOfEntry) }}
              </template>
            </el-table-column>
            <!-- <el-table-column label="账户状态" prop="enableState" /> -->
            <!-- fixed="right" 方便操作 把操作变为固定的位置，即使数据很多出现滚动条，也不会对它造成影响 -->
            <el-table-column label="操作" fixed="right" width="280">
              <template #default="{row}">
                <el-button type="text" size="small" @click="goDetail(row.id)">查看</el-button>
                <el-button type="text" size="small" @click="assignRole(row.id)">分配角色</el-button>
                <el-button type="text" size="small" @click="delEmploy(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <div style="height: 60px; margin-top: 10px">
            <el-pagination layout="prev, pager, next" :total="total" @current-change="pageChange" />
          </div>
        </el-card>
      </el-card>
    </div>
    <!-- 新增员工弹窗 -->
    <add-employee :show-dialog="showDialog" @close-dialog="closeDialog" @update-list="hGetEmployeeList" />
    <!-- 分配角色弹框 -->
    <assign-role :cur-id="curId" :show-role-dialog="showRoleDialog" @close-role-dialog="closeRoleDialog" />
  </div>
</template>

<script>
// import PageTools from '@/components/PageTools'
import { getEmployeeList, delEmployee } from '@/api/employee'
import AddEmployee from './components/add-employee'
import AssignRole from './components/assign-role'
import { getExportData } from '@/utils/excelData'
import dayjs from 'dayjs'
export default {
  name: 'Employees',
  components: {
    // PageTools
    AddEmployee,
    AssignRole
  },
  data() {
    return {
      list: [],
      params: {
        page: 1, // 当前页
        size: 10 // 每页条数
      },
      total: 0, // 总数
      loading: false,
      showDialog: false, // 控制新增员工弹窗 默认不显示
      showRoleDialog: false,
      curId: null
    }
  },
  mounted() {
    this.hGetEmployeeList()
  },
  methods: {
    // 处理时间格式
    formatDate(value, str = 'YYYY-MM-DD') {
      return dayjs(value).format(str)
    },
    async hGetEmployeeList() {
      const res = await getEmployeeList(this.params)
      // this.list = res.data.rows
      const { rows, total } = res.data
      // console.log(rows.reverse())
      // this.list = rows.reverse()
      this.list = rows
      this.total = total

      this.$set(this.params, 'total', total)
    },
    // 枚举用法
    formatEmployment(type) {
      const map = {
        1: '正式',
        2: '非正式'
      }
      return map[type]
    },
    pageChange(page) {
      this.params.page = page
      this.hGetEmployeeList()
    },
    indexMethod(index) {
      return index + 1
    },
    delEmploy(id) {
      //  危险操作提示用户
      //  调用接口
      //  更新列表
      this.$confirm('确认删除此员工?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 接口调用
        await delEmployee(id)
        this.hGetEmployeeList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 新增员工
    addEmployee() {
      // 打开弹窗
      this.showDialog = true
    },
    // 关闭弹窗
    closeDialog() {
      this.showDialog = false
    },
    exportExcel() {
      import('@/vendor/Export2Excel').then(async excel => {
        // console.log(excel)
        // excel对象  两个方法
        // 1.export_json_to_excel  使用json格式的数据导出为excel
        // 2.export_table_to_excel 不常用
        // 准备表头数据
        // 1.准备表头中的中英文对应关系
        const headerRelation = {
          '手机号': 'mobile',
          '姓名': 'username',
          '入职日期': 'timeOfEntry',
          '工号': 'workNumber',
          '转正日期': 'correctionTime',
          '部门': 'departmentName'
        }

        // 调用接口拿到当前要导出的表格数据
        const res = await getEmployeeList(this.params)

        // 做二次处理以满足 导出插件的要求
        const { header, data } = getExportData(res.data.rows, headerRelation)

        // 把处理之后的数据 配置到插件对应的位置  表头 表格
        excel.export_json_to_excel(
          {
            header, // 表头 必填
            data, // 具体数据 必填
            filename: 'excel-list', // 文件名称
            autoWidth: true, // 宽度是否自适应
            bookType: 'xlsx' // 生成的文件类型
          }
        )
      })
    },
    // 除非是只有一个参数或者没有参数 可以用简单字符串拼接
    // 否则一律使用对象形式传参
    // path + query -> url?id=1 $route.query.id
    // name + params -> url/1 规范情况下
    // 需要在定义路由的位置书写name属性
    // 并且如果需要参数 $route.params.id
    goDetail(id) {
      this.$router.push({
        path: '/employees/employeeDetail',
        query: {
          id
        }
      })
    },
    assignRole(curId) {
      // 打开弹窗 回显可选角色列表
      this.showRoleDialog = true
      this.curId = curId
    },
    // 关闭弹窗
    closeRoleDialog() {
      this.showRoleDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
  .tips {
    line-height: 34px;
    padding: 0px 15px;
    border-radius: 5px;
    border: 1px solid rgba(145, 213, 255, 1);
    background: rgba(230, 247, 255, 1);
    i {
      margin-right: 10px;
      color: #409eff;
    }
  }
</style>
